<template>
  <div class="page-header-index-wide">
    <a-card title="用户概况" class="border-no box-shadow-5 clearfix">
      <div slot="extra">
        <a-range-picker class="margin10R"
                        :default-value="[moment(startDay, 'YYYY-MM-DD'), moment(endDay, 'YYYY-MM-DD')]"
                        @change="datepickerchange"
        ></a-range-picker>
        <a-button type="primary" @click="getData">查询</a-button>
      </div>
      <div class="pad10 clearfix">
        <a-card-grid class="block-pub clearfix" :hoverable="false">
          <div class="tit">访客数</div>
          <div class="num">{{ userMap.userCnt }}</div>
          <div class="detail">环比增长：<span :style="{color: userMap.add?'red':'green'}">{{ userMap.percent }}%</span>
          </div>
        </a-card-grid>
        <a-card-grid class="block-pub clearfix" :hoverable="false">
          <div class="tit">浏览量</div>
          <div class="num">{{ visMap.visCnt }}</div>
          <div class="detail">环比增长：<span :style="{color: visMap.add?'red':'green'}">{{ visMap.percent }}%</span>
          </div>
        </a-card-grid>
        <a-card-grid class="block-pub clearfix" :hoverable="false">

          <div class="tit">新增用户数</div>
          <div class="num">{{ regMap.regCnt }}</div>
          <div class="detail">环比增长：<span :style="{color: regMap.add?'red':'green'}">{{ regMap.percent }}%</span>
          </div>
        </a-card-grid>
        <a-card-grid class="block-pub clearfix" :hoverable="false">
          <div class="tit">成交用户数</div>
          <div class="num">{{ userOrderMap.userOrderCnt }}</div>
          <div class="detail">环比增长：<span :style="{color: userOrderMap.add?'red':'green'}">{{ userOrderMap.percent
            }}%</span>
          </div>
        </a-card-grid>
        <a-card-grid class="block-pub clearfix" :hoverable="false">
          <div class="tit">访客-支付转化率</div>
          <div class="num">{{ percMap.perc }}</div>
          <div class="detail">环比增长：<span :style="{color: percMap.add?'red':'green'}">{{ percMap.percent }}%</span>
          </div>
        </a-card-grid>
        <a-card-grid class="block-pub clearfix" :hoverable="false">
          <div class="tit">充值用户数</div>
          <div class="num">{{ rechargeMap.rechargeCnt }}</div>
          <div class="detail">环比增长：<span :style="{color: rechargeMap.add?'red':'green'}">{{ rechargeMap.percent
            }}%</span></div>
        </a-card-grid>
        <a-card-grid class="block-pub clearfix" :hoverable="false">
          <div class="tit">客单价</div>
          <div class="num">{{ avgAmtMap.avgAmt }}</div>
          <div class="detail">环比增长：<span :style="{color: avgAmtMap.add?'red':'green'}">{{ avgAmtMap.percent
            }}%</span></div>
        </a-card-grid>
        <a-card-grid class="block-pub clearfix" :hoverable="false">
          <div class="tit">累计用户数</div>
          <div class="num">{{ userTotalMap.userTotalCnt }}</div>
          <div class="detail">环比增长：<span :style="{color: userTotalMap.add?'red':'green'}">{{ userTotalMap.percent
            }}%</span>
          </div>
        </a-card-grid>
        <a-card-grid class="block-pub clearfix" :hoverable="false">
          <div class="tit">累计充值用户数</div>
          <div class="num">{{ userTotalRechargeMap.userTotalRechargeCnt }}</div>
          <div class="detail">环比增长：<span
            :style="{color: userTotalRechargeMap.add?'red':'green'}">{{ userTotalRechargeMap.percent }}%</span></div>
        </a-card-grid>
        <a-card-grid class="block-pub clearfix" :hoverable="false">
          <div class="tit">累计成交用户数</div>
          <div class="num">{{ userTotalOrderMap.userTotalOrderCnt }}</div>
          <div class="detail">环比增长：<span
            :style="{color: userTotalOrderMap.add?'red':'green'}">{{ userTotalOrderMap.percent }}%</span></div>
        </a-card-grid>
      </div>

    </a-card>
    <div class="bg-white box-shadow-5 margin10T clearfix">
      <line-chart-multid :height="340" :margin="margin" :fields="userFields" :dataSource="userData"></line-chart-multid>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import { ChartEventMixins } from '@/components/chart/mixins/ChartMixins'
import LineChartMultid from '@/components/chart/LineChartMultid'
import { orderAnalysis, orderCharts, userAnalysis, userCharts } from '@/api/api'

export default {
  name: 'UserAnalysis',
  components: {
    LineChartMultid
  },
  data() {
    return {
      gemoSize: 3,
      legendItems: [
        { value: '订单金额', marker: { symbol: 'square', fill: '#3182bd', radius: 5 } },
        { value: '访问量', marker: { symbol: 'hyphen', stroke: '#fdae6b', radius: 5, lineWidth: 3 } }
      ],
      margin:{
        top: 20,
        right: 50,
        bottom: 30,
        left: 50
      },
      startDay: '',
      endDay: '',
      userMap: {},
      visMap: {},
      regMap: {},
      userOrderMap: {},
      percMap: {},
      rechargeMap: {},
      avgAmtMap: {},
      userTotalMap: {},
      userTotalRechargeMap: {},
      userTotalOrderMap: {},
      userFields: ['新增用户数','访客数','成交用户数','充值用户数'],
      userData: [],
      scale: [{
        dataKey: '访客数',
        min: 0
      }],
      axisLabel: {
        textStyle: {
          fill: '#fdae6b'
        }
      }
    }
  },
  created() {
    this.endDay = moment(Date.now()).format('YYYY-MM-DD')
    this.startDay = moment(Date.now()).add('-1', 'weeks').format('YYYY-MM-DD')
    this.getData()
  },
  methods: {
    moment,
    datepickerchange(date, dateString) {
      this.startDay = dateString[0]
      this.endDay = dateString[1]
    },
    getData() {
      let params = {
        'startDay': this.startDay,
        'endDay': this.endDay
      }
      userAnalysis(params).then(res => {
        if (res.success) {
          let result = res.result
          this.userMap = result.userMap
          this.visMap = result.visMap
          this.regMap = result.regMap
          this.userOrderMap = result.userOrderMap
          this.percMap = result.percMap
          this.rechargeMap = result.rechargeMap
          this.avgAmtMap = result.avgAmtMap
          this.userTotalMap = result.userTotalMap
          this.userTotalRechargeMap = result.userTotalRechargeMap
          this.userTotalOrderMap = result.userTotalOrderMap
        }else{
          this.userMap = {}
          this.visMap = {}
          this.regMap = {}
          this.userOrderMap = {}
          this.percMap = {}
          this.rechargeMap = {}
          this.avgAmtMap = {}
          this.userTotalMap = {}
          this.userTotalRechargeMap = {}
          this.userTotalOrderMap = {}
        }
      })
      userCharts(params).then(res => {
        this.userData = res.result
      })

    }
  }
}
</script>

<style lang="less" scoped>
.circle-cust {
  position: relative;
  top: 28px;
  left: -100%;
}

.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

/* 首页访问量统计 */
.head-info {
  position: relative;
  text-align: left;
  padding: 0 32px 0 0;
  min-width: 125px;

  &.center {
    text-align: center;
    padding: 0 32px;
  }

  span {
    color: rgba(0, 0, 0, .45);
    display: inline-block;
    font-size: .95rem;
    line-height: 42px;
    margin-bottom: 4px;
  }

  p {
    line-height: 42px;
    margin: 0;

    a {
      font-weight: 600;
      font-size: 1rem;
    }
  }
}
</style>